<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/vue.js"></script>
		<script src="./lib/vue-router.js"></script>
		<link rel="stylesheet" href="./lib/bootstrap.css" />
		
	</head>
	<body>
		<div id="app">
			
			<router-link to="/login?id=10&name=张三">登录</router-link>
			<router-link to="/register">注册</router-link>
			
			<router-view></router-view>
		</div>
		<script>
			var login={
				template:'<h1>登录组件-----{{$route.query.id}}---{{$route.query.name}}</h1>',
				created(){//组件生命周期的钩子函数
					console.log(this.$route)
					console.log(this.$route.query.id)
				}
			}
			var register={
				template:'<h1>注册组件</h1>'
			}
			var router =new VueRouter({
				routes:[
					{path:'/',redirect:'/login'},
					{path:'/login',component:login},
					{path:'/register',component:register}
				],
				linkActiveClass:'myactive'  //这里是可以该类名的
			})
			
			var vm = new Vue({
				el: '#app',
				data: {
				},
				methods: {
				},
				// router: routerObj //将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件
				router
			})
		</script>
	</body>
</html>
